<template>
	<view>

		<view style="margin: 20rpx;">
			<u-search  :clearabled="true"></u-search>
		</view>
		

		<u-sticky bgColor="#fff">
			<u-tabs style="text-align:center;" @change="sectionChange" :current="current" :list="list" lineWidth="30"
				lineHeight="10" lineColor="#f56c6c" :activeStyle="{
		             color: '#303133',
		             fontWeight: 'bold',
		             transform: 'scale(1.05)'
		         }" :inactiveStyle="{
		             color: '#606266',
		             transform: 'scale(1)'
		         }" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;">
			</u-tabs>
		</u-sticky>

		<swiper class="scroll-view-height" @change="swipeIndex" :current="current">
			<swiper-item>
				<scroll-view scroll-y="true" show-scrollbar="false">
					<view class="listItem">
						<view style="display: flex;flex-direction: row;">
							<u-avatar size="60" :src="src"></u-avatar>
							<text style="margin-left: 20rpx;flex: 1;">有家卤肉饭></text>
							<text style="font-size: 25rpx;">已完成</text>
						</view>
						<view
							style="margin-top: 20rpx;display: flex;flex-direction: row;justify-content: space-between;text-align: center;font-size: 30rpx;align-items: center;">
							<view>
								<u--image width="150" height="150" radius="20" :src="src"></u--image>
								<text>东坡肉</text>
							</view>

							<view>
								<u--image width="150" height="150" radius="20" :src="src"></u--image>
								<text>东坡肉</text>
							</view>
							<view>
								<u--image width="150" height="150" radius="20" :src="src"></u--image>
								<text>东坡肉</text>
							</view>

							<view style="display: flex;flex-direction: column;">
								<text style="font-size: 35rpx;font-weight: bold;">¥29.4</text>
								<text style="font-size: 20rpx;">共计1件</text>
							</view>

						</view>

						<view style="display: flex;justify-content: space-between;font-size: 30rpx;margin-top: 20rpx;">
							<text style="color:#797979;">下单时间：2023年9月14日 21:03:59</text>
						</view>
						<view style="display: flex;justify-content: flex-end;margin-top: 20rpx;">

							<view style="width: 180rpx;">
								<u-button size="mini" shape="circle" style="width: 100rpx;" text="删除"></u-button>
							</view>

							<view style="width: 180rpx;margin-left: 20rpx;">
								<u-button size="mini" shape="circle" style="width: 100rpx;" text="评价"></u-button>
							</view>
							<view style="width: 180rpx;margin-left: 20rpx;">
								<u-button size="mini" shape="circle" style="width: 100rpx;" text="再来一单"></u-button>
							</view>

						</view>

					</view>
				</scroll-view>
			</swiper-item>
			<swiper-item>
				<scroll-view scroll-y="true" show-scrollbar="false">
					待付款
				</scroll-view>
			</swiper-item>

			<swiper-item>
				<scroll-view scroll-y="true" show-scrollbar="false">
					待收货
				</scroll-view>
			</swiper-item>

			<swiper-item>
				<scroll-view scroll-y="true" show-scrollbar="false">
					已完成
				</scroll-view>
			</swiper-item>

			<swiper-item>
				<scroll-view scroll-y="true" show-scrollbar="false">
					已取消
				</scroll-view>
			</swiper-item>

			<swiper-item>
				<scroll-view scroll-y="true" show-scrollbar="false">
					售后/退款
				</scroll-view>
			</swiper-item>
		</swiper>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					name: '全部',
				}, {
					name: '待付款',
				}, {
					name: '待收货'
				}, {
					name: '已完成'
				}, {
					name: '已取消'
				}, {
					name: '售后/退款'
				}],
				current: 0,
				src: "https://img1.baidu.com/it/u=453140444,1334408994&fm=253&fmt=auto&app=138&f=JPEG?w=794&h=500",
				
			}
		},
		onLoad(option) {
			
			this.current=option.page
		},
		methods: {
			//页面滑动
			swipeIndex(index) {
				this.current = index.detail.current
			},
			//顶部选择器
			sectionChange(index) {

				this.current = index.index;
			}

		}
	}
</script>

<style>
	page {
		overflow: hidden;
	}

	.scroll-view-height {
		/* 页面高度减去包含状态栏、标题、tab组件的高度 */
		height: 100vh;
		background: whitesmoke;
	}

	/* 下划线居中 */
	/deep/ .u-tabs__wrapper__nav__line {
		width: 30px !important;

	}

	.listItem {
		padding: 20rpx;
		margin: 20rpx;
		background: white;
	}

	
</style>